<template>
	<el-card>
		<el-form inline>
			<el-form-item label="商品名称">
				<el-input style="width: 300px"></el-input>
			</el-form-item>
			<el-form-item label="商品归属">
				<el-input style="width: 300px"></el-input>
			</el-form-item>
			<el-form-item label="添加时间">
				<el-date-picker style="width: 350px" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
			</el-form-item>
			<el-form-item>
				<el-button>重置</el-button>
				<el-button @click="listIn()">搜索</el-button>
				<el-button @click="addBtn()">发布商品</el-button>
				<el-button>批量上架</el-button>
				<el-button>批量下架</el-button>
			</el-form-item>
		</el-form>
	</el-card>
	<el-card>
		<el-tabs v-model="state.productStatus" type="card" tab-position="top" @tab-click="listIn()">
			<el-tab-pane label="全部" :name="''"> </el-tab-pane>
			<el-tab-pane label="上架" :name="1"> </el-tab-pane>
			<el-tab-pane label="下架" :name="2"> </el-tab-pane>
		</el-tabs>

		<el-table :data="state.dataList" fit highlight-current-row>
			<el-table-column align="center" label="序号" width="100">
				<template #default="scope">
					{{ scope.$index }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="名字">
				<template #default="scope">
					{{ scope.row.productName }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="分类">
				<template #default="scope">
					{{ scope.row.classificationName }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="图片">
				<template #default="scope">
					<el-image style="width: 50px" :src="scope.row.tbProductPictureList[0].picture" fit="cover" />
				</template>
			</el-table-column>
			<el-table-column align="center" label="状态">
				<template #default="scope">
					{{ scope.row.productStatus == 1 ? '上架' : '下架' }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作">
				<template>
					<el-button>下架</el-button>
					<el-button>修改 </el-button>
					<el-button>操作</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
	<fabuComponent ref="fabuComponentFef" :show="state.show" />
</template>

<script lang="ts" setup>
import { getTbProductPageList } from '/@/api//shopping';
import { reactive, ref, defineAsyncComponent, onMounted } from 'vue';
const fabuComponent = defineAsyncComponent(() => import('./component/fabu.vue'));
const fabuComponentFef = ref();
const state = reactive({
	dataList: [] as Array<any>,
	productStatus: '',
	show: false,
});
onMounted(() => {
	listIn();
});
const listIn = async () => {
	const data = await getTbProductPageList({
		pageNum: 1,
		pageSize: 10,
		productStatus: state.productStatus,
		shopId: 15256,
	});
	state.dataList = data.data.records;
};
const addBtn = () => {
	fabuComponentFef.value.openDialog(true);
};
</script>